import { PageCard } from '@/page-components/index';
import { HeartFilled } from '@ant-design/icons';
import { history } from '@umijs/max';
import { Card, List } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

const Index = () => {
  const CardList = (props: any) => {
    const data = [
      {
        title: '点点滴滴',
        img: '',
        content: '💖记录你我生活',
      },
      {
        title: '爱情历程',
        img: '',
        content: '🗃️甜蜜瞬间有你陪伴',
        path: '/timePage',
      },
      {
        title: '时光相册',
        img: '',
        content: '🖼️记录你我生活',
        path: '/imgList',
      },
    ] as any;
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    const getList = () => {
      setLoading(true);
      return new Promise((reslove) => {
        setTimeout(() => {
          setList(data);
          reslove(data);
          setLoading(false);
        }, 300);
      });
    };

    useEffect(() => {
      getList();
    }, []);


    const CardItem = ({ item }: any) => {
      return (
        <div
          className={styles?.cardItemBox}
          onClick={() => history.push(item?.path)}
        >
          <Card size="small" style={{ width: 300 }} className={styles?.card}>
            <div className={styles?.cardItem}>
              <div className={styles?.cardItemLf}>
                {/* <img src="" alt="" /> */}
                <HeartFilled style={{ fontSize: '30px', color: '#f5222d' }} />
              </div>
              <div className={styles?.cardItemRg}>
                <p className={styles.cardItemRgTitle}>{item?.title}</p>
                <p className={styles.cardItemRgContent}>{item?.content}</p>
              </div>
            </div>
          </Card>
        </div>
      );
    };
    return (
      <div
        style={{
          // width: '100%',
          // display: 'flex',
          // justifyContent: 'center',
          marginTop: '20px',
          padding: '0 20px',
          transition: 'all 0.3s ease-in-out',
        }}
        {...props}
      >
        <List
          grid={{
            gutter: 16,
            column: 3,
            xs: 1,
            sm: 2,
            md: 3,
            lg: 3,
            xl: 3,
            xxl: 3,
          }}
          loading={loading}
          dataSource={[...list, ...list, ...list]}
          renderItem={(item: any) => (
            <List.Item>
              <CardItem item={item}></CardItem>
            </List.Item>
          )}
        />
      </div>
    );
  };
  return (
    <div className={styles?.container}>
      <PageCard>
        <CardList></CardList>
      </PageCard>
    </div>
  );
};
export default Index;
